<template>
  <div class="content">
    <dc-header :page-to="'/home/reports'"
               :title="'记账'"
               @submit="goAccount"
               :action-title="'设置' | hasPermissions('设置')"></dc-header>
    <div class="head-top content-body box-size">
      <dc-select-date @getTabBarDatep="getDate" :startTime="this.curDate.beginTime"  type="month"></dc-select-date>
      <div class="bg-white" style="margin-bottom: 53px;">
        <dc-row type="flex" justify="space-around" class="mt20">
          <dc-col span="12">
            <div class="account-tab" @click="changeTab(2)" :class="{'account-tab-active':accountFlag === 2}">
              <div class="tab-div account-pay-yellow">
                <i class="iconfont icon-account-pay"></i>
                <div class="tab-number">
                  <span class="num">{{accountToolTotal.totalExpend}}</span>
                  <br/>
                  <span>本月支出总计</span>
                </div>
              </div>
            </div>
          </dc-col>
          <dc-col span="12">
            <div class="account-tab" @click="changeTab(1)" :class="{'account-tab-active':accountFlag === 1}">
              <div class="tab-div account-income-green">
                <i class="iconfont icon-account-income"></i>
                <div class="tab-number">
                  <span class="num">{{accountToolTotal.totalIncome}}</span>
                  <br/>
                  <span>本月收入总计</span>
                </div>
              </div>
            </div>
          </dc-col>
        </dc-row>
        <div>
          <div class="common-card">
            <mt-cell :title="accountFlag === 2? '支出项': '收入项'" class="main-title account-border-b">
            </mt-cell>
            <div @click="golist(data)" v-for="data in accountToolList" :key="data.accountCode">
              <dc-row type="flex" justify="center" class="bg-white account-input-list account-border-b">
                <dc-col span="10">
                  <svg class="account-color-icon" aria-hidden="true">
                    <use :xlink:href="'#'+data.accountIcon"></use>
                  </svg>
                  <span class="input-label">{{data.accountName}}</span>
                  <dc-tooltip v-if="data.accountName === '原料成本' && accountFlag ===2" :place="'bottom-left'"
                              :msg="'当选择按菜品毛利估算时，此处数据为系统自动更新，不可修改'"></dc-tooltip>
                  <dc-tooltip v-if="data.accountName === '营收收入' && accountFlag ===1" :place="'bottom-left'"
                              :msg="'营业收入为系统自动更新，不可修改'"></dc-tooltip>
                </dc-col>
                <dc-col span="14">
                  <div class="input-div pro-account-number">
                    <span>{{data.accountNum}}</span>
                    <i class="iconfont icon-right"></i>
                  </div>
                </dc-col>
              </dc-row>
            </div>
          </div>
        </div>
      </div>

    </div>
    <router-link :to="{path: '/keepAccounts', query: {accountType: accountFlag}}"  @click.native = "gotokeepAccounts">
        <div class="account-btn"><i class="iconfont icon-textedite"></i>记一笔</div>
      </router-link>
  </div>
</template>
<script>
  import account from '@/components/account/account';
  import header from '@/common/plugins/header';
  import datetabbar from '@/common/plugins/datetabbar/month';
  import tooltip from '@/common/plugins/tooltip';
  import {col, row} from '@/common/Flex';
  import api from '@/common/api/account';
  import {mapActions, mapGetters} from 'vuex';
  import {permissions} from '@/common/permission';
  /**
   * @namespace  components/account/accountTools/proAccountTool
   * @author lxr
   */
  export default {
    components: {
      'dc-header': header,
      'dc-col': col,
      'dc-row': row,
      'dc-select-date': datetabbar,
      'dc-tooltip': tooltip
    },
    data () {
      return {
        accountFlag: 2, //1表示收入，2表支出
        invisible: false,
        param: {  //接口调用入参
          accountFlag: 2,
          beginTime: null,
          endTime: null
        },
        accountToolList: [],
        accountToolTotal: {}
      };
    },
    activated () {
      console.log(1);
      if (this.curDate) {
        this.param = {
          accountFlag: this.param.accountFlag,
          beginTime: this.curDate.beginTime
        };
      }
    },
    methods: {
      ...mapActions({saveDate: 'saveDate'}),
      goAccount () {
        //获取记账设置权限
        if (!permissions('设置')) {
          return;
        }
        setTimeout(() => {
          this.$router.push('/accountSet/1');
        }, 0);
      },
      getDate (date) {
        this.param.beginTime = date.startTime;
        this.param.endTime = date.endTime;
        this.getAccountList(this.param);
        this.getAccountTotal(this.param);
      },
      //支出和收入tab切换
      changeTab (data) {
        this.accountToollist = [];
        this.accountFlag = data;
        this.param.accountFlag = data;
        this.getAccountList(this.param);
      },
      //接口查询获得收入或者支出的数据
      getAccountList (param) {
        api.getAccountToolList(param).then(res => {
          this.accountToolList = res;
        });
      },
      //接口查询支出，收入总计
      getAccountTotal (param) {
        api.getAccountToolTotal(param).then(res => {
          this.accountToolTotal = res;
          this.accountToolTotal.totalExpend = account.numberChange(this.accountToolTotal.totalExpend);
          this.accountToolTotal.totalIncome = account.numberChange(this.accountToolTotal.totalIncome);
        });
      },
      gotokeepAccounts () {
        let date = {
          beginTime: this.param.beginTime,
          endTime: this.param.endTime};
        this.saveDate(date);
        // event.preventDefault(); //阻止时间冒泡
      },
      golist (e) {
        let date = {
          beginTime: this.param.beginTime,
          endTime: this.param.endTime};
        this.saveDate(date);
        event.preventDefault(); //阻止时间冒泡
        let params = {
          beginTime: this.param.beginTime,
          endTime: this.param.endTime,
          accountCode: e.accountCode,
          accountName: e.accountName
        };
        this.$router.push({name: 'costMaterial', params: {data: JSON.stringify(params)}});
      }
    },
    computed: {
      ...mapGetters(['store', 'userInfo', 'curDate'])
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../../assets/css/variable";
  @import "../account";

  .pro-account-number {
    text-align: right;
    color: #999999;
    i {
      color: #CCCCCC;
    }
  }
</style>
